<template>
  <div>
    <!-- 操作按钮 -->
    <div style="margin-bottom: 10px;" v-if="showAdd">
      <el-button size="mini" type="primary" @click="addRow" v-if="showAdd">新增</el-button>
      <el-button size="mini" type="danger" @click="deleteSelectedRows" v-if="showAdd">删除</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="fileList" border style="width: 100%; margin-top: 20px;" table-layout="fixed" @selection-change="handleSelectionChange">

      <!-- 多选列 -->
      <el-table-column type="selection" width="55" v-if="showAdd"></el-table-column>

      <!-- 其他列不变 -->
      <el-table-column  label="文件类型" width="400">
        <template slot-scope="{ row }">
          <div v-if="showAdd">
            <el-input v-model="row.fileClassName" placeholder="请输入文件类型" />
          </div>
          <div v-else>
             <span>{{ row.fileClassName }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="附件">
        <template slot-scope="{ row, $index }">
          <file-upload
            v-model="row.fileInfo"
            @update:datetime="handleDatetimeUpdate($index, $event)"
            style="width: 100%;"
          />
        </template>
      </el-table-column>

      <el-table-column  label="上传人" width="150">
        <template slot-scope="{ row }">
          <span>{{ row.uploader }}</span>
        </template>
      </el-table-column>

      <el-table-column  label="上传时间" width="260">
        <template slot-scope="{ row }">
          <span>{{ formatDate(row.uploadTime) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload';

export default {
  name: 'FileUploadTable',
  components: { FileUpload },
  props: {
    // 接收父组件传来的文件列表
    value: {
      type: Array,
      required: true,
      default: () => []
    },
    // 是否显示“新增”按钮
    showAdd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectedRows: [], // 保存选中的行
      username : this.$store.state.user.nickName,
    };
  },
  computed: {
    fileList: {
      get() {
        return this.value;
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  },
  methods: {
    // 新增一行
    addRow() {
      const newRow = {
        fileClassName: '', // 可以从 props 或接口获取默认值
        uploader: this.username,
        uploadTime: '',
        fileInfo: []
      };

      this.fileList = [...this.fileList, newRow];
    },

    // 删除选中行
    deleteSelectedRows() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择要删除的行');
        return;
      }

      this.fileList = this.fileList.filter(row => !this.selectedRows.includes(row));
      this.selectedRows = []; // 清空已选
    },

    // 记录选中行
    handleSelectionChange(rows) {
      this.selectedRows = rows;
    },

    // 时间格式化
    formatDate(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    // 文件上传时间更新
    handleDatetimeUpdate(index, datetime) {
      this.fileList[index].uploadTime = datetime;
      this.fileList = [...this.fileList]; // 触发响应式更新
    }
  }
};
</script>
